<script lang="ts" setup>
import {ref,watch,computed} from "vue"
import {storeToRefs} from "pinia"

import {useRoute,useRouter}  from "vue-router"
import { useTagStore } from '@/stores/tag';
import { ElMenu, ElMenuItem, ElMessage, ElSubMenu } from 'element-plus'

import { useMenuStore } from '@/stores/menu'

const menuStore = useMenuStore()
const collapse = computed(() => menuStore.isCollapse)


const tagStore = useTagStore()
const {tagList} = storeToRefs(tagStore)

const route = useRoute()
const router = useRouter()
const activeIndex = ref('')

const routerLink=(item:string)=>{

    const routes = router.getRoutes()
    const currentRoute = routes.find((route) => route.name === item)
    //去重
    if(currentRoute){
        const isExist = tagList.value.some((tag) => tag.path === currentRoute.path)
        if(!isExist){
            tagStore.addTag(currentRoute)
        }
    }
    console.log(item,currentRoute,7878)
    // router.push(item)
}

watch(() => route.name, (newPath) => {
//   console.log(newPath,"新地址")
  activeIndex.value = newPath
}, { immediate: true })


</script>
<template>
    <div class="menu-box" :class="{ collapse: collapse }">
        <div class="system-title">
            <img src="../assets/images/logo.jpg" alt="" class="logo">
            <span v-if="!collapse">资产智控系统</span>
        </div>
        <el-menu unique-opened router :default-active="activeIndex" background-color="#e8e8e8" active-text-color="#33cbcc" @select="routerLink" :collapse="collapse">
            <el-menu-item index="/">
                <el-icon class="iconfont icon-xiazai44"></el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="asset">
                <template #title>
                    <el-icon class="iconfont icon-zichan"></el-icon>
                    <span>资产</span>
                </template>
                <el-menu-item index="asset-list">资产清单</el-menu-item>
                <el-menu-item index="asset-category">资产分类</el-menu-item>
                <el-menu-item index="asset-location">资产位置</el-menu-item>
                <el-menu-item index="asset-borrow">资产借用</el-menu-item>
                <el-menu-item index="asset-return">资产归还</el-menu-item>
                <el-menu-item index="asset-fix">资产维修</el-menu-item>
                <el-menu-item index="asset-transfer">资产调拨</el-menu-item>
                <el-menu-item index="asset-disposal">资产处置</el-menu-item>

            </el-sub-menu>
            <el-sub-menu index="consumables">
                <template #title>
                    <el-icon class="iconfont icon-haocaiguanli"></el-icon>
                    <span>耗材</span>
                </template>
                <el-menu-item index="consumables-category">耗材类别</el-menu-item>
                <el-menu-item index="consumables-store">耗材仓库</el-menu-item>
                <el-menu-item index="consumables-list">耗材清单</el-menu-item>
                <el-menu-item index="consumables-borrow">耗材出库</el-menu-item>
              <el-menu-item index="consumables-transfer">耗材调拨</el-menu-item>
                <el-menu-item index="consumables-disposal">耗材处置</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
               <template #title>
                    <el-icon class="iconfont icon-shenpi"></el-icon>
                    <span>审批</span>
                </template>
                <el-menu-item index="process-template">流程管理</el-menu-item>
                <el-menu-item index="my-process">审批管理</el-menu-item>
                <el-menu-item index="emp-process-list">员工申请</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
                <template #title>
                    <el-icon class="iconfont icon-sousuo"></el-icon>
                    <span>盘点</span>
                </template>
                <el-menu-item index="inventory-check">资产盘点</el-menu-item>
                <el-menu-item index="consumable-check">耗材盘点</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
                <template #title>
                    <el-icon class="iconfont icon-xitongguanli"></el-icon>
                    <span>系统</span>
                </template>
                <el-menu-item index="system-department">部门管理</el-menu-item>
                <el-menu-item index="system-user">用户管理</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>


<style scoped lang="less">
.menu-box {
  width: 200px !important;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000 !important;
  transition: width 0.3s ease;

  &.collapse {
    width: 64px !important;
  }

  .system-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: rgb(48, 65, 88);
    font-size: 15px;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s ease;
    .logo {
        width: 50px;
        height: 40px;
        // margin-right: 10px;
        vertical-align: middle;
    }
  }

  .el-menu {
    width: 100% !important;
    height: calc(100% - 50px);
    overflow-y: auto;
    background-color: rgb(48, 65, 88);
    border-right: none;
  }

  /deep/.el-menu-item,
  /deep/.el-sub-menu__title {
    background-color: rgb(48, 65, 88);
    color: #bfcbd9 !important;
  }

  /deep/.el-menu-item.is-active {
    background-color: #001529 !important;
    color: #409EFF !important;
  }
}


</style>